<template>
	<lay-container fluid="true" style="padding: 10px">
		<lay-row>
			<lay-col :md="24">
				<lay-card>
					<lay-form style="margin: 0px; padding: 0px;">
						<lay-space>
							<lay-form-item style="margin: 0px;">
								<lay-select style="width: 110px" size="sm" v-model="page.SearchField">
									<lay-select-option value="id" label="主键"></lay-select-option>
									<lay-select-option value="name" label="名称"></lay-select-option>
									<lay-select-option value="dbid" label="账户"></lay-select-option>
									<lay-select-option value="cls_id" label="分类ID"></lay-select-option>
									<lay-select-option value="state" label="状态"></lay-select-option>
									<lay-select-option value="time_new" label="建立日期"></lay-select-option>
									<lay-select-option value="time_up" label="修改日期"></lay-select-option>
								</lay-select>
							</lay-form-item>
							<lay-form-item style="margin: 0px;">
								<lay-select style="width: 76px" size="sm" v-model="page.SearchOperator">
									<lay-select-option value="LIKE" label="默认"></lay-select-option>
									<lay-select-option value="=" label="等于"></lay-select-option>
									<lay-select-option value=">" label="大于"></lay-select-option>
									<lay-select-option value="<" label="小于"></lay-select-option>
									<lay-select-option value="<>" label="不等"></lay-select-option>
									<lay-select-option value="IN" label="IN"></lay-select-option>
								</lay-select>
							</lay-form-item>
							<lay-form-item style="margin: 0px;">
								<lay-input style="width: 180px" size="sm" :allow-clear="true" placeholder="关键词"
									v-model="page.SearchaAtistop"></lay-input>
							</lay-form-item>
							<lay-form-item style="margin: 0px;">
								<lay-select style="width: 82px" size="sm" v-model="page.SearchaSort">
									<lay-select-option value="DESC" label="降序↓"></lay-select-option>
									<lay-select-option value="ASE" label="升序↑"></lay-select-option>
								</lay-select>
							</lay-form-item>
							<lay-form-item style="margin: 0px;">
								<lay-select style="width: 110px" size="sm" v-model="page.SearchaSortField">
									<lay-select-option value="id"
										:label="(page.SearchaSort == 'DESC') ? '主键↓' : '主键↑'"></lay-select-option>
									<lay-select-option value="name"
										:label="(page.SearchaSort == 'DESC') ? '名称↓' : '名称↑'"></lay-select-option>
									<lay-select-option value="dbid"
										:label="(page.SearchaSort == 'DESC') ? '账户↓' : '账户↑'"></lay-select-option>
									<lay-select-option value="cls_id"
										:label="(page.SearchaSort == 'DESC') ? '分类ID↓' : '分类ID↑'"></lay-select-option>
									<lay-select-option value="state"
										:label="(page.SearchaSort == 'DESC') ? '状态↓' : '状态↑'"></lay-select-option>
									<lay-select-option value="time_new"
										:label="(page.SearchaSort == 'DESC') ? '建立日期↓' : '建立日期↑'"></lay-select-option>
									<lay-select-option value="time_up"
										:label="(page.SearchaSort == 'DESC') ? '修改日期↓' : '修改日期↑'"></lay-select-option>
								</lay-select>
							</lay-form-item>
							<lay-form-item style="margin: 0px;">
								<lay-button size="sm" type="primary" @click="query_button">查询</lay-button>
							</lay-form-item>
							<!-- 额外查询方法 -->
							<lay-form-item style="display: none;">
								<lay-input v-model="page.additional.use"></lay-input>
								<lay-input v-model="page.additional.SearchField"></lay-input>
								<lay-input v-model="page.additional.SearchOperator"></lay-input>
								<lay-input v-model="page.additional.SearchaAtistop"></lay-input>
							</lay-form-item>
						</lay-space>
					</lay-form>
				</lay-card>
			</lay-col>
			<lay-row space="4">
				<lay-col md="5">
					<lay-card style="height: 500px;overflow:scroll;">
						<lay-button size="xs" type="primary" @click="cls_List_ubmitx('off')">收缩</lay-button>
						<lay-button size="xs" type="primary" @click="cls_List_ubmitx('on')">展开</lay-button>
						<lay-tree :data="treeData" :onlyIconControl="true">
							<template #title="{ data }">
								<span @click="opencls(data)"> {{ data.title }}</span>
							</template>
						</lay-tree>
					</lay-card>
				</lay-col>
				<lay-col md="19">
					<lay-card>
						<lay-table :columns="PN.columns" :dataSource="dataSource" :default-toolbar="defaultToolbar" even>
							<template v-slot:toolbar>
								<lay-button size="sm" type="primary" @click="addWindow('new', null)">新增</lay-button>
								<lay-button size="sm" type="primary" @click="ListSubmit">刷新</lay-button>
							</template>
							<template v-slot:index2="{ data }">{{ data.index2 }}</template>
							<template v-slot:id="{ data }">{{ data.id }}</template>
							<template v-slot:dbid="{ data }">{{ data.dbid }}</template>
							<template v-slot:state="{ data }"><span v-html="PN.state(data.state)"></span></template>
							<template v-slot:unit_pack="{ data }"><span
									v-html="PN.unit_pack(data.unit_pack)"></span></template>


							<template v-slot:operator="{ data }">
								<lay-button size="xs" type="primary" @click="addWindow('up', data)">编辑</lay-button>
							</template>
							<template v-slot:footer>
								<lay-page v-model="page.current" :layout="layout1a" :limit=page.limit :total=page.total
									:limits="[3, 10, 20, 30, 40, 50, 100]" @change="change"></lay-page>
								<!-- <lay-page v-model="page.current" :limit=page.limit :total=page.total :limits="[3, 10, 20, 30, 40, 50, 100]" @change="change"></lay-page> -->
							</template>
						</lay-table>
					</lay-card>
				</lay-col>
			</lay-row>

		</lay-row>
	</lay-container>
	<sonWindow ref="sonWindowRef" @topClick="topFn" />
</template>

<script setup lang="ts">

import { ref, watch, reactive, onMounted } from "vue";
import MyModal from './MyModal.vue'
import { layer } from "@layui/layer-vue";
import sonWindow from "./module/indexWindow.vue";
import { LayoutKey } from "@layui/layui-vue/types/component/page/index.vue";
import { GoodsList, GoodsClsListJSON } from "../../../api/module/user"; //请求模块

import PNDB from "./indexPN";

const PN = new PNDB;
const bbs = PN.AA('PN加载......' + window.location.href);
const defaultToolbar = ref(true);
const layout1a = ref<LayoutKey[]>(['count', 'prev', 'page', 'next', 'limits', 'refresh', 'skip']);//分页条块
const page = ref({
	total: 0,//总行数
	limit: 3,//每页行数
	current: 1,//当前页
	SearchField: "name",//默认搜索字段
	SearchOperator: "LIKE",//默认搜索查询表达式
	SearchaAtistop: "",//默认搜索关键词
	SearchaSort: "DESC",//默认搜索排序方式ASE,DESC升降序
	SearchaSortField: "id",//默认排序字段
	additional: {
		use: 0,//启用额外查询方法-0否-1是。
		SearchField: "name",//默认搜索字段
		SearchOperator: "LIKE",//默认搜索查询表达式
		SearchaAtistop: "",//默认搜索关键词
	}
});
const treeData = ref([]);//分类树数据

//监听子组件
const topFn = function (db: any) {
	console.log("我的父组件中的方法", db);
	ListSubmit()
};


const List_pread = ref({
	spread: "off",// 查询的树是否展开 off 为收缩，其它 为展开
});

// 分类树远程数据
const cls_List_ubmit = async () => {
	treeData.value = [];
	let data = await GoodsClsListJSON(List_pread.value);//远程获取树数据
	// console.log(data);
	layer.load(0, { time: 1000 })
	if (data.code == 200) {
		treeData.value = data.cateTree.txt_json_unicode;//数据集
	} else {
		layer.msg(data.msg, { icon: 2 });
	}
};



// 分类树展开收缩
function cls_List_ubmitx(db: string) {
	List_pread.value.spread = db;
	console.log(List_pread.value.spread);
	cls_List_ubmit();
}



// 分类树点击
function opencls(db: any) {
	console.log(db);
	page.value.total = 0;//总行数
	page.value.current = 1;//页码
	page.value.additional = {
		use: 1,//启用额外查询方法-0否-1是。
		SearchField: "cls_id",//搜索字段
		SearchOperator: "IN",//搜索查询表达式
		// SearchaAtistop:JSON.stringify(db.ids),//搜索关键词
		SearchaAtistop: db.ids,//搜索关键词
	}
	console.log(page.value.additional);

	ListSubmit();
}

// 商品档案列表
const dataSource = ref([]);
const ListSubmit = async () => {
	// let { data, code, msg } = await userList(page.value);
	let data = await GoodsList(page.value);//商品档案列表
	layer.load(0, { time: 1000 })
	if (data.code == 200) {
		dataSource.value = data.data.data;//数据集
		page.value.total = data.data.total;//数据总行数
	} else {
		layer.msg(data.msg, { icon: 2 });
	}
};


const sonWindowRef = ref<InstanceType<typeof MyModal> | null>(null)
// 打开弹窗
const addWindow = function (op: string, data: any) {
	// op='up'//修改模式
	// op='new'//新增模式
	sonWindowRef.value?.childFun(op, data, treeData.value);//子组件方法
};

// 分页点击
const change = function ({ current, limit }: any) {
	console.log("当前页码:" + current + " 每页数量:" + limit);
	page.value.current = current;//当前页码
	page.value.limit = limit;//每页数量
	ListSubmit();
};

//查询按钮点击
const query_button = function () {
	console.log("查询按钮点击");
	page.value.additional.use = 0;//启用额外查询方法-0否-1是。
	page.value.total = 0;//总行数
	page.value.current = 1;//页码


	ListSubmit();

};
// 生命周期
onMounted(() => {
	// ListSubmit();
	console.log(bbs);
	cls_List_ubmitx('off');

})
</script>
